<template>
  <header class="page-header" :class="{isFixed:isFixed}">
    <nav class="page-header-inner">
      <h1 class="logo" @click="clickGoHome">
        <img src="@/assets/images/logo.png" alt />
        <span class="site-name">图一波</span>
      </h1>
      <div class="nav-right">
        <el-button type="text" @click="clickGoHome">首页</el-button>
        <!-- <el-button type="text" @click="linkToTopic">更多专题</el-button> -->
        <el-button type="text">设计圈子</el-button>
         
        <el-dropdown @command="clickDropDownMenu">
          <el-button type="text">
            素材中心
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-picture-outline-round" command="0">icon图标</el-dropdown-item>
             <!-- <el-dropdown-item icon="el-icon-video-play" command="1">视频音效</el-dropdown-item>
            <el-dropdown-item icon="el-icon-files" command="2">办公模板</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-platform" command="3">办公软件</el-dropdown-item>
            <el-dropdown-item icon="el-icon-discover" command="4">SVG图标</el-dropdown-item>  -->
          </el-dropdown-menu>
        </el-dropdown>
       
        <el-dropdown v-if="isLogin" @command="menu_select">
          <el-button type="text">
            {{nickname}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item>我的收藏</el-dropdown-item> -->
            <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
            <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
            <el-dropdown-item command="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-else type="text" @click="login">登录/注册</el-button>
      </div>
    </nav>
    <Login @update="update" ref="loginbox"/>
  </header>
</template>

<script>
import { mapState, /*mapMutations*/ } from "vuex";
import Login from "@/components/account/Login.vue";
export default {
  name: "PageHeader",
  components: {
    Login
  },
  computed: {
    ...mapState("user", {
      isLogin: state => state.isLogin,
      //showLoginModal:state=>state.showLoginModal
    })
  },
  data() {
    return {
      nickname: "", //用户名
      userid: "", //用户id
      avatar: "", //头像
      isFixed: false
    };
  },

  methods: {
    // ...mapMutations([
    //   //去vuex的Mutations中取出名为setUser的函数放到此地
    //   "setUser","SET_isLogin"
    // ]),
       
    menu_select(name) {
      if (name == "loginout") {
        window.sessionStorage.removeItem("tuyibo_userid");
        this.$axios.post("/api/user/logout").then(res => {
          if(res.status === 200 ){
            this.$store.commit("user/SET_isLogin", false);
            this.$store.commit("user/setUser", null);
            this.$refs.loginbox.reset()
            // this.$store.dispatch('SET_LOGIN_INFO', null)
          }
        });
      }else if(name==="personalCenter"){
        var userid=this.userid
        // this.$router.push({path:"/personalCenter",query:{userid}})
        this.$router.push({
          name:"personalCenter",
          params:{userid}
        });
      }
    },

    login(){
      this.$refs.loginbox.show = true
    },

    linkToTopic() {
      this.$router.push("/list?moreTopic");
    },
    clickGoHome() {
      this.$router.push("/");
    },
    clickDropDownMenu(command) {
      //点击下拉菜单
      // this.$message('click on item ' + command);
      if (command == 0) this.$router.push("/icons");
    },
    handleScroll() {
      //顶部的导航栏在滚动的时候监听，如果滚动距离超过60px，就给导航栏header追加一个class=isFixed
      const top = document.documentElement.scrollTop;
      // console.log(top);
      if (top > 60) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    update(info) {
      this.$store.commit("user/setUser", info);
      this.$store.commit("user/SET_isLogin", true);
      this.nickname = info.name;
      this.userid = info.userid;
      if (info.avatar !== null) {
        this.avatar = `/avatar/${info.avatar}.jpg`;
      }

      if (this.$refs.loginbox !== undefined && !info.login) {
        this.$axios.get("/api/user/check?id=" + info.userid).then(res => {
          if( res.data.status == 1 ){    
            if (info.action == "bind_mobile") {
              this.$refs.loginbox.show_bind_moblie(info);
            } else {
              this.$refs.loginbox.reset();
            }
          }else{
            alert('登录检测失败')
          }
        });
      }

      if (window.sessionStorage !== undefined) {
        sessionStorage.setItem("tuyibo_userid", JSON.stringify(info));
      }
    }
  },
  mounted() {
    window.loginbox = this.$refs.loginbox;
    window.addEventListener("scroll", this.handleScroll);
    
    window.addEventListener("message", event => {
      var origin = event.origin;
      if ( origin === "http://www.tuyibo.cn" || origin === "http://tuyibo.cn" ) { // || origin === "http://localhost:8081"
        var data = event.data;
        if (data.action == undefined) return;
        this.update(data);
      }
    }, false);

    if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
      var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
      this.$store.commit("user/SET_isLogin", true);
      this.$store.commit("user/setUser", data);
      this.nickname = data.name;
      this.userid = data.userid;
    }
  },
  // 离开该页面需要移除这个监听的事件
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-header {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  transition: all 0.15s;
  &.isFixed {
    background-color: @color-text-primary;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  .page-header-inner {
    height: 60px;
    display: flex;
    align-items: center;
    .logo {
      height: 40px;
      overflow: hidden;
      display: flex;
      align-items: center;
      cursor: pointer;
      opacity: 0.85;
      &:hover {
        opacity: 1;
      }
      img {
        display: block;
        height: 40px;
        margin-right: 16px;
      }
      .site-name {
        font-size: 20px;
        color: @white;
      }
    }
    .nav-right {
      margin-left: auto;
      .el-button {
        margin-left: 20px;
        font-size: 16px;
        color: @white;
      }
    }
  }
}
</style>
